<template>
  <div class="common-layout" style="background-color: #fff">
    <!-- 忘记密码的校验 -->
    <PhoneCode title="忘记密码" v-if="isMounted && phoneCodeShow" />
    <div class="login" v-if="isMounted && !phoneCodeShow">
      <div class="title">重置密码</div>
      <div class="desc"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
        <el-form-item label="手机：" v-if="isForget">
          <el-input
            :maxlength="11"
            v-model="route.query.phone"
            disabled
            type="text"
            style="border: none; color: #787878"
          />
        </el-form-item>
        <el-form-item label="账号：" v-else>
          <el-input
            :maxlength="50"
            v-model="accountShowText"
            disabled
            type="text"
            style="border: none; color: #787878"
          />
        </el-form-item>
        <el-form-item label="新密码：" prop="password">
          <el-input
            v-model.trim="ruleForm.password"
            type="password"
            show-password
            has-feedback
            placeholder="密码为数字、大小写字母和特殊字符的组合，且长度8~18位"
            allowClear
            autocomplete="off"
            :maxLength="18"
          />
        </el-form-item>
        <el-form-item label="二次确认新密码：" prop="newPassword">
          <el-input
            v-model.trim="ruleForm.newPassword"
            type="password"
            show-password
            has-feedback
            placeholder="请确认两次密码输入一致"
            allowClear
            autocomplete="off"
            :maxLength="18"
          />
        </el-form-item>
        <el-button class="login-btn" type="primary" @click="submitForm"> 确认 </el-button>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onBeforeMount, onMounted, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import md5 from 'js-md5'
import { useStore } from 'vuex'
import PhoneCode from './components/phoneCode.vue'
import { validatePass, validatePass2 } from './tool'
import { commonAccountShowText, commonValidate } from '@/utils/utils'
import { LoginRequest } from '@/services/login'

export default defineComponent({
  name: 'resetPasswordPage',
  components: { PhoneCode },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    // const loading = ref<boolean>(false)
    const ruleFormRef = ref<any>(null)
    const ruleForm = ref<any>({
      password: '',
      newPassword: '',
    })
    const rules = reactive<any>({
      password: [{ validator: validatePass(), trigger: 'blur' }],
      newPassword: [{ validator: validatePass2(ruleForm), trigger: 'blur' }],
    })
    const accountShowText = computed(() => commonAccountShowText(store.state.loginInfoModule.loginInfo))
    const phoneCodeShow = ref<boolean>(false)
    const isMounted = ref<boolean>(false)
    const isForget = ref<boolean>(route.query.type === 'forget')

    // 2. 方法定义
    const submitForm = async () => {
      const validateResult = await commonValidate(ruleFormRef.value)
      if (!validateResult) return
      const params = JSON.parse(JSON.stringify(ruleForm.value))
      params.password = md5(params.password)
      params.newPassword = md5(params.newPassword)
      // 如果是忘记密码过来的，需要特别处理下
      if (isForget.value) {
        const { authorizationCode, phone } = route.query
        params.authorizationCode = authorizationCode
        params.phone = phone
      }
      const res = await LoginRequest.resetPassword(params)
      if (res.success) {
        router.replace('/login')
      }
    }

    // 3. 事件
    onBeforeMount(() => {
      phoneCodeShow.value = isForget.value && !route.query.authorizationCode
    })
    onMounted(() => {
      isMounted.value = true
    })
    watch(() => route.query, (val) => {
      phoneCodeShow.value = isForget.value && !val.authorizationCode
    })
    // 4. 返回
    return {
      ruleFormRef,
      rules,
      ruleForm,
      accountShowText,
      phoneCodeShow,
      isMounted,
      isForget,
      route,
      // methods
      submitForm,
    }
  },
})
</script>

<style scoped lang="less">
.common-layout {
  background-color: #fff;
  padding-top: 200px;
}
.login {
  width: 600px;
  margin: 0 auto;
  text-align: center;
  color: #787878;
  @media screen and (max-width: 576px) {
    width: 95%;
  }
  @media screen and (max-width: 320px) {
    .captcha-button {
      font-size: 14px;
    }
  }

  .title {
    font-size: 48px;
    font-weight: 700;
    color: #212121;
    letter-spacing: 2px;
  }
  .desc {
    font-weight: 400;
    font-size: 20px;
    color: #b6babd;
    letter-spacing: 1px;
    margin-bottom: 70px;
  }
  .login-btn {
    font-size: 20px;
    font-weight: 500;
    margin-top: 23px;
    width: 450px;
    height: 50px;
    border-radius: 100px;
  }
  :deep(.el-form-item__label) {
    font-size: 14px;
    color: #787878;
    line-height: 30px;
    width: 180px;
  }
}
</style>
